<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="link-box">
        <!-- 注意 href 属性值, 链接后面加了一个换行 -->
        <a href="http://hcysun.me
        ">aaaa</a>
        <!-- 注意 href 属性值, 链接后面加了一个 Tab -->
        <a href="http://hcysun.me   ">bbbb</a>
    </div>

    <script type="text/javascript">
        // console.log(document.getElementById('link-box').innerHTML);

        // ---------
        
        // check whether current browser encodes a char inside attribute value.
        // (检查当前浏览器是否在属性值内部编码了字符(character))
        let div; 
        function getShouldDecode(href) {                              // {3-2}
            div = div || document.createElement('div');               // {3-3}
            div.innerHTML = href ? `<a href="\n">` : `<div a="\n"/>`; // {3-4}
            return div.innerHTML.indexOf('&#10;') > 0;                // {3-5}
        }
        // - 测试 getShouldDecode 函数
        // - `getShouldDecode` 接收一个布尔值参数 `href`, 如果该参数为 `true` 
        //   意味着要检测的是 `a` 标签的 `href` 属性; `false` 为检测任意属性.
        console.log(getShouldDecode(true));


        // ---------
        function makeMap(str, expectsLowerCase){
            const map = Object.create(null);
            // - `split()`: 基于指定的分隔符把字符串转换成数组
            const list = str.split(',');
            for (let i = 0; i < list.length; i++) {
                map[list[i]] = true;
            }
            // console.log(map);
            return expectsLowerCase 
                ? val => map[val.toLowerCase()] 
                : val => map[val]
        }
        const isHTMLTag = makeMap(
            'html,body,base,head,link,meta,style,title,' +
            'address,article,aside,footer,header,h1,h2,h3,h4,h5,h6,hgroup,nav,section,' +
            'div,dd,dl,dt,figcaption,figure,picture,hr,img,li,main,ol,p,pre,ul.' +
            'a,b,abbr,bdi,bdo,br,cite,code,data,dfn,em,i,kbd,mark,q,rp,rt,rtc,ruby,' +
            's,samp,small,span,strong,sub,sup,time,u,var,wbr,area,audio,map,trac,video,' +
            'embead,object,param,source,canvas,script,noscript,del,ins,' +
            'caption,col,colgroup,table,thead,tbody,td,th,tr,' +
            'button,datalist,fieldset,form,input,label,legend,meter,optgroup,option,' +
            'output,progress,select,textarea,' +
            'details,dialog,menu,menuitem,summary,' +
            'content,element,shadow,template,blockquote,iframe,tfoot'
        );
        console.log(isHTMLTag('div'));
        console.log(isHTMLTag('x'))

    </script>
</body>
</html>